<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务管理系统 - 设置</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ url_for('dashboard') }}">
                <i class="fa fa-tasks mr-2"></i>任务管理系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('dashboard') }}">
                            <i class="fa fa-dashboard mr-1"></i>仪表盘
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('task_list') }}">
                            <i class="fa fa-list mr-1"></i>任务列表
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('category_list') }}">
                            <i class="fa fa-folder mr-1"></i>分类管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('reports') }}">
                            <i class="fa fa-bar-chart mr-1"></i>数据报表
                        </a>
                    </li>
                </ul>
                <div class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle active" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-user-circle mr-1"></i>{{ session.username }}
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                            <li>
                                <a class="dropdown-item" href="{{ url_for('notifications') }}">
                                    <i class="fa fa-bell mr-1"></i>通知
                                    {% if unread_count > 0 %}
                                        <span class="badge bg-danger ml-2">{{ unread_count }}</span>
                                    {% endif %}
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item active" href="{{ url_for('settings') }}">
                                    <i class="fa fa-cog mr-1"></i>设置
                                </a>
                            </li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <a class="dropdown-item" href="{{ url_for('logout') }}">
                                    <i class="fa fa-sign-out mr-1"></i>退出登录
                                </a>
                            </li>
                        </ul>
                    </li>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="container-fluid mt-4">
        <!-- 消息提示区域 -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="关闭"></button>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <!-- 页面标题 -->
        <div class="mb-4">
            <h2>
                <i class="fa fa-cog mr-2"></i>系统设置
            </h2>
        </div>

        <!-- 设置导航标签 -->
        <div class="mb-4">
            <ul class="nav nav-tabs" id="settingsTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="account-tab" data-bs-toggle="tab" data-bs-target="#account" type="button" role="tab" aria-controls="account" aria-selected="true">
                        <i class="fa fa-user mr-1"></i>账号设置
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="notification-tab" data-bs-toggle="tab" data-bs-target="#notification" type="button" role="tab" aria-controls="notification" aria-selected="false">
                        <i class="fa fa-bell mr-1"></i>通知设置
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="preference-tab" data-bs-toggle="tab" data-bs-target="#preference" type="button" role="tab" aria-controls="preference" aria-selected="false">
                        <i class="fa fa-sliders mr-1"></i>偏好设置
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="data-tab" data-bs-toggle="tab" data-bs-target="#data" type="button" role="tab" aria-controls="data" aria-selected="false">
                        <i class="fa fa-database mr-1"></i>数据管理
                    </button>
                </li>
            </ul>
        </div>

        <!-- 设置内容 -->
        <div class="tab-content" id="settingsTabsContent">
            <!-- 账号设置 -->
            <div class="tab-pane fade show active" id="account" role="tabpanel" aria-labelledby="account-tab">
                <div class="card bg-white shadow-sm">
                    <div class="card-header bg-white border-bottom border-gray-200">
                        <h4 class="card-title mb-0">个人信息</h4>
                    </div>
                    <div class="card-body">
                        <form method="POST" action="{{ url_for('settings', tab='account') }}">
                            {{ account_form.hidden_tag() }}
                            <div class="row gap-4">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="username" class="form-label">用户名</label>
                                        {{ account_form.username(class="form-control", id="username", value=current_user.username) }}
                                    </div>
                                    <div class="mb-3">
                                        <label for="email" class="form-label">邮箱</label>
                                        {{ account_form.email(class="form-control", id="email", value=current_user.email) }}
                                    </div>
                                    <div class="mb-3">
                                        <label for="fullname" class="form-label">姓名</label>
                                        {{ account_form.fullname(class="form-control", id="fullname", value=current_user.fullname if current_user.fullname else '') }}
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="bio" class="form-label">个人简介</label>
                                        {{ account_form.bio(class="form-control", id="bio", rows="4", value=current_user.bio if current_user.bio else '') }}
                                    </div>
                                </div>
                            </div>
                            <div class="mt-4">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fa fa-save mr-1"></i>保存更改
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="card bg-white shadow-sm mt-4">
                    <div class="card-header bg-white border-bottom border-gray-200">
                        <h4 class="card-title mb-0">修改密码</h4>
                    </div>
                    <div class="card-body">
                        <form method="POST" action="{{ url_for('settings', tab='account', action='change_password') }}">
                            {{ password_form.hidden_tag() }}
                            <div class="row gap-4">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="current_password" class="form-label">当前密码</label>
                                        {{ password_form.current_password(class="form-control", id="current_password") }}
                                    </div>
                                    <div class="mb-3">
                                        <label for="new_password" class="form-label">新密码</label>
                                        {{ password_form.new_password(class="form-control", id="new_password") }}
                                    </div>
                                    <div class="mb-3">
                                        <label for="confirm_password" class="form-label">确认新密码</label>
                                        {{ password_form.confirm_password(class="form-control", id="confirm_password") }}
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="bg-light p-4 rounded">
                                        <h5><i class="fa fa-info-circle text-primary mr-2"></i>密码要求</h5>
                                        <ul class="list-unstyled text-sm text-muted mt-2">
                                            <li><i class="fa fa-check-circle text-success mr-2"></i>长度至少8个字符</li>
                                            <li><i class="fa fa-check-circle text-success mr-2"></i>包含至少一个大写字母</li>
                                            <li><i class="fa fa-check-circle text-success mr-2"></i>包含至少一个小写字母</li>
                                            <li><i class="fa fa-check-circle text-success mr-2"></i>包含至少一个数字</li>
                                            <li><i class="fa fa-check-circle text-success mr-2"></i>包含至少一个特殊字符</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-4">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fa fa-key mr-1"></i>修改密码
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- 通知设置 -->
            <div class="tab-pane fade" id="notification" role="tabpanel" aria-labelledby="notification-tab">
                <div class="card bg-white shadow-sm">
                    <div class="card-header bg-white border-bottom border-gray-200">
                        <h4 class="card-title mb-0">通知偏好</h4>
                    </div>
                    <div class="card-body">
                        <form method="POST" action="{{ url_for('settings', tab='notification') }}">
                            {{ notification_form.hidden_tag() }}
                            <div class="space-y-4">
                                <div class="p-3 bg-light rounded">
                                    <h5 class="mb-3">任务相关通知</h5>
                                    <div class="form-check">
                                        {{ notification_form.notify_task_assigned(class="form-check-input", id="notify_task_assigned", checked=current_user.notify_task_assigned) }}
                                        <label class="form-check-label" for="notify_task_assigned">
                                            <i class="fa fa-tasks mr-2 text-primary"></i>任务分配通知
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        {{ notification_form.notify_task_updated(class="form-check-input", id="notify_task_updated", checked=current_user.notify_task_updated) }}
                                        <label class="form-check-label" for="notify_task_updated">
                                            <i class="fa fa-refresh mr-2 text-info"></i>任务更新通知
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        {{ notification_form.notify_task_completed(class="form-check-input", id="notify_task_completed", checked=current_user.notify_task_completed) }}
                                        <label class="form-check-label" for="notify_task_completed">
                                            <i class="fa fa-check-circle mr-2 text-success"></i>任务完成通知
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        {{ notification_form.notify_task_deadline(class="form-check-input", id="notify_task_deadline", checked=current_user.notify_task_deadline) }}
                                        <label class="form-check-label" for="notify_task_deadline">
                                            <i class="fa fa-clock-o mr-2 text-warning"></i>任务截止提醒
                                        </label>
                                    </div>
                                </div>

                                <div class="p-3 bg-light rounded">
                                    <h5 class="mb-3">评论与回复通知</h5>
                                    <div class="form-check">
                                        {{ notification_form.notify_comment_added(class="form-check-input", id="notify_comment_added", checked=current_user.notify_comment_added) }}
                                        <label class="form-check-label" for="notify_comment_added">
                                            <i class="fa fa-comment mr-2 text-primary"></i>新评论通知
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        {{ notification_form.notify_comment_mentioned(class="form-check-input", id="notify_comment_mentioned", checked=current_user.notify_comment_mentioned) }}
                                        <label class="form-check-label" for="notify_comment_mentioned">
                                            <i class="fa fa-at mr-2 text-info"></i>评论提及通知
                                        </label>
                                    </div>
                                </div>

                                <div class="p-3 bg-light rounded">
                                    <h5 class="mb-3">系统通知</h5>
                                    <div class="form-check">
                                        {{ notification_form.notify_system_updates(class="form-check-input", id="notify_system_updates", checked=current_user.notify_system_updates) }}
                                        <label class="form-check-label" for="notify_system_updates">
                                            <i class="fa fa-cog mr-2 text-primary"></i>系统更新通知
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        {{ notification_form.notify_maintenance(class="form-check-input", id="notify_maintenance", checked=current_user.notify_maintenance) }}
                                        <label class="form-check-label" for="notify_maintenance">
                                            <i class="fa fa-wrench mr-2 text-warning"></i>系统维护通知
                                        </label>
                                    </div>
                                </div>

                                <div class="p-3 bg-light rounded">
                                    <h5 class="mb-3">通知方式</h5>
                                    <div class="form-check">
                                        {{ notification_form.notify_by_email(class="form-check-input", id="notify_by_email", checked=current_user.notify_by_email) }}
                                        <label class="form-check-label" for="notify_by_email">
                                            <i class="fa fa-envelope mr-2 text-primary"></i>邮件通知
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        {{ notification_form.notify_by_push(class="form-check-input", id="notify_by_push", checked=current_user.notify_by_push) }}
                                        <label class="form-check-label" for="notify_by_push">
                                            <i class="fa fa-bell mr-2 text-info"></i>站内通知
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-4">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fa fa-save mr-1"></i>保存设置
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- 偏好设置 -->
            <div class="tab-pane fade" id="preference" role="tabpanel" aria-labelledby="preference-tab">
                <div class="card bg-white shadow-sm">
                    <div class="card-header bg-white border-bottom border-gray-200">
                        <h4 class="card-title mb-0">界面偏好</h4>
                    </div>
                    <div class="card-body">
                        <form method="POST" action="{{ url_for('settings', tab='preference') }}">
                            {{ preference_form.hidden_tag() }}
                            <div class="space-y-4">
                                <div class="mb-4">
                                    <label class="form-label">主题</label>
                                    <div class="btn-group" role="group">
                                        {{ preference_form.theme(class="form-select") }}
                                    </div>
                                </div>

                                <div class="mb-4">
                                    <label class="form-label">默认任务视图</label>
                                    <div class="btn-group" role="group">
                                        {{ preference_form.default_view(class="form-select") }}
                                    </div>
                                </div>

                                <div class="mb-4">
                                    <label class="form-label">日期格式</label>
                                    <div class="btn-group" role="group">
                                        {{ preference_form.date_format(class="form-select") }}
                                    </div>
                                </div>

                                <div class="mb-4">
                                    <label class="form-label">时间格式</label>
                                    <div class="btn-group" role="group">
                                        {{ preference_form.time_format(class="form-select") }}
                                    </div>
                                </div>

                                <div class="p-3 bg-light rounded">
                                    <h5 class="mb-3">界面选项</h5>
                                    <div class="form-check">
                                        {{ preference_form.show_completed_tasks(class="form-check-input", id="show_completed_tasks", checked=current_user.show_completed_tasks) }}
                                        <label class="form-check-label" for="show_completed_tasks">
                                            <i class="fa fa-check-square-o mr-2 text-primary"></i>显示已完成任务
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        {{ preference_form.show_task_age(class="form-check-input", id="show_task_age", checked=current_user.show_task_age) }}
                                        <label class="form-check-label" for="show_task_age">
                                            <i class="fa fa-calendar mr-2 text-info"></i>显示任务创建时间
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        {{ preference_form.show_task_priority(class="form-check-input", id="show_task_priority", checked=current_user.show_task_priority) }}
                                        <label class="form-check-label" for="show_task_priority">
                                            <i class="fa fa-flag mr-2 text-warning"></i>显示任务优先级
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-4">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fa fa-save mr-1"></i>保存设置
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- 数据管理 -->
            <div class="tab-pane fade" id="data" role="tabpanel" aria-labelledby="data-tab">
                <div class="card bg-white shadow-sm">
                    <div class="card-header bg-white border-bottom border-gray-200">
                        <h4 class="card-title mb-0">数据导出</h4>
                    </div>
                    <div class="card-body">
                        <p class="mb-4 text-muted">导出您的任务数据为CSV或JSON格式，可用于备份或迁移到其他系统。</p>
                        <div class="d-flex gap-3">
                            <a href="{{ url_for('export_data', format='csv') }}" class="btn btn-secondary">
                                <i class="fa fa-download mr-1"></i>导出为CSV
                            </a>
                            <a href="{{ url_for('export_data', format='json') }}" class="btn btn-secondary">
                                <i class="fa fa-download mr-1"></i>导出为JSON
                            </a>
                        </div>
                    </div>
                </div>

                <div class="card bg-white shadow-sm mt-4">
                    <div class="card-header bg-white border-bottom border-gray-200">
                        <h4 class="card-title mb-0">数据导入</h4>
                    </div>
                    <div class="card-body">
                        <form method="POST" enctype="multipart/form-data" action="{{ url_for('import_data') }}">
                            {{ import_form.hidden_tag() }}
                            <p class="mb-4 text-muted">从CSV或JSON文件导入任务数据。请确保文件格式正确。</p>
                            <div class="mb-3">
                                {{ import_form.file(class="form-control") }}
                            </div>
                            <div class="mt-4">
                                <button type="submit" class="btn btn-secondary">
                                    <i class="fa fa-upload mr-1"></i>导入数据
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="card bg-white shadow-sm mt-4 border-danger">
                    <div class="card-header bg-white border-bottom border-gray-200">
                        <h4 class="card-title mb-0 text-danger">账号管理</h4>
                    </div>
                    <div class="card-body">
                        <p class="mb-4 text-danger">警告：以下操作不可恢复，请谨慎执行！</p>
                        <div class="d-flex gap-3">
                            <button type="button" class="btn btn-danger" id="deleteAccountBtn">
                                <i class="fa fa-user-times mr-1"></i>删除账号
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除账号确认模态框 -->
    <div class="modal fade" id="deleteAccountModal" tabindex="-1" aria-labelledby="deleteAccountModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-danger" id="deleteAccountModalLabel">确认删除账号</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                </div>
                <div class="modal-body">
                    <p class="text-danger font-bold mb-3">警告：此操作不可恢复！</p>
                    <p>删除账号后，您的所有数据（包括任务、评论、通知等）将被永久删除，无法恢复。</p>
                    <p class="mt-3">请输入您的密码以确认此操作：</p>
                    <form id="deleteAccountForm" method="POST" action="{{ url_for('delete_account') }}">
                        {{ delete_account_form.hidden_tag() }}
                        <div class="mb-3">
                            {{ delete_account_form.password(class="form-control", placeholder="输入密码确认") }}
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteAccountBtn">确认删除</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 引入自定义JS -->
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 删除账号确认模态框
            const deleteAccountModal = new bootstrap.Modal(document.getElementById('deleteAccountModal'));
            
            // 删除账号按钮点击事件
            document.getElementById('deleteAccountBtn').addEventListener('click', function() {
                deleteAccountModal.show();
            });
            
            // 确认删除账号按钮点击事件
            document.getElementById('confirmDeleteAccountBtn').addEventListener('click', function() {
                document.getElementById('deleteAccountForm').submit();
            });

            // 获取URL中的tab参数
            const urlParams = new URLSearchParams(window.location.search);
            const tab = urlParams.get('tab');
            
            // 如果有tab参数，激活对应的标签页
            if (tab) {
                const tabElement = document.getElementById(`${tab}-tab`);
                if (tabElement) {
                    const tabInstance = new bootstrap.Tab(tabElement);
                    tabInstance.show();
                }
            }
        });
    </script>
</body>
</html>